<template>
  <div>
    <router-view/>
    <van-tabbar v-model="active">
      <van-tabbar-item
          v-for="(item, index) in tabBar"
          :key="index"
          :to="item.path" 
          :badge="item.badge? $store.getters.allCount: null"
          :icon="item.icon">
          {{ item.title }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      tabBar: [
        {
          path: "/home/homes",
          icon: "newspaper-o",
          title: "首页",
          active: 0
        },
        {
          path: "/home/list",
          icon: "bar-chart-o",
          title: "列表",
          active: 1
        },
        {
          path: "/home/car",
          icon: "cart-o",
          title: "购物车",
          active: 2,
          badge: true
        },
        {
          path: "/home/my",
          icon: "manager-o",
          title: "我的",
          active: 3
        }
      ]
    };
  },
  created() {
    this.active = this.tabBar.filter(item => item.path === this.$route.path)[0].active
  }
};
</script>

<style>
</style>